<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--类别数据 --左侧树   -->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
              v-model="categoryName"
              placeholder="请输入预测范围名称"
              clearable
              prefix-icon="Search"
              style="margin-bottom: 20px"
          />
        </div>
        <div class="tree-container">
          <el-tree
              :data="categoryOptions"
              :props="{ label: 'label', children: 'children' }"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="categoryTreeRef"
              node-key="id"
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
          >

          </el-tree>
        </div>
      </el-col>

      <el-col :span="20" :xs="24">
        <!--编制工作台查询区域-->
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item v-for="item in dimensionOptions" :label="item.label" :prop="item.value">
            <el-input style="width: 215px;" v-model="queryParams.dyParams[item.value]" clearable placeholder="请输入"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!--操作按钮-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
                type="success"
                plain
                icon="Edit"
                :disabled="single"
                @click="handleEditTable"
                v-hasPermi="['tool:gen:edit']"
            >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
                type="warning"
                plain
                icon="Download"
                @click="handleExport"
                v-hasPermi="['monitor:job:export']"
            >导出
            </el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <!--编制工作台多表头区域-->
        <el-table :data="state.tableData.data"
                  v-loading="state.tableData.loading"
                  stripe
                  border>
          <el-table-column v-for="column in state.tableData.header"  :min-width="column.width" align="center" :key="column.column" :label="column.columnName" :prop="column.column">
            <el-table-column  v-if="column.children?.length > 0" v-for="(item,index) in column.children" align="center" :min-width="item.width" :key="index" :label="item.columnName" :prop="item.column"></el-table-column>
          </el-table-column>
        </el-table>

      </el-col>

    </el-row>
  </div>
</template>

<script setup name="areaDefinition">
 import RecursiveTableHeader from "@/components/RecursiveTableHeader";


const {proxy} = getCurrentInstance();
const title = ref("");
const selectTree = ref("");

const categoryOptions = ref([
  {
    "id": 1,
    "label": "经济预测",
    "children": [
      {
        "id": 2,
        "label": "10年期经济预测"
      }
    ]
  },
  {
    "id": 3,
    "label": "发电量预测",
    "children": [
      {
        "id": 4,
        "label": "10年期发电量预测"
      }
    ]
  },
  {
    "id": 5,
    "label": "综合预测",
    "children": [
      {
        "id": 6,
        "label": "10年期综合预测"
      }
    ]
  }
]);


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    code: "",
    name: "",
    isDefault: null,
    enable: null,
    dyParams: {}
  },
  rules: {
    code: [{required: true, message: "维度code不能为空", trigger: "blur"}],
    name: [{required: true, message: "维度名称不能为空", trigger: "blur"}],
  }
});

const {queryParams, form, rules} = toRefs(data);
const dimensionOptions = ref([
  {value: 'dim1', label: '堆型'},
  {value: 'dim2', label: '发电功率'},
  {value: 'dim3', label: '机组寿命'},
  {value: 'dim4', label: '装机成本'}
])
/**
 * 定义表头属性映射关系
 */
const property = {
  prop: "column",
  label: "columnName",
  width: "width",
  children: "children",
};

 const state = reactive({
   tableData: {
     loading: false,
     header: [
       {
         column: "dim1",
         columnName: "堆型",
         width: "100px",
         children: [],
       },
       {
         column: "dim3",
         columnName: "机组寿命",
         width: "100px",
         children: [],
       },
       {
         column: "dim4",
         columnName: "装机成本",
         width: "100px",
         children: [],
       },
       {
         column: "2030",
         columnName: "2030年",
         width: "560px",
         children: [
           {
             column: "kf12030",
             columnName: "核电装机容量(亿千瓦)",
             width: "280px",
             children: [],
           }
         ],
       }, {
         column: "2040",
         columnName: "2040年",
         width: "560px",
         children: [
           {
             column: "kf12040",
             columnName: "核电装机容量(亿千瓦)",
             width: "280px",
             children: [],
           }
         ],
       }, {
         column: "2050",
         columnName: "2050年",
         width: "560px",
         children: [
           {
             column: "kf12050",
             columnName: "核电装机容量(亿千瓦)",
             width: "280px",
             children: [],
           }
         ],
       }, {
         column: "2060",
         columnName: "2060年",
         width: "560px",
         children: [
           {
             column: "kf12060",
             columnName: "核电装机容量(亿千瓦)",
             width: "280px",
             children: [],
           }
         ],
       }

     ],
     data: [{
       dim1: '二代及三代大堆',
       dim3: '60年',
       dim4: '200亿',
       kf12030: '1.08',
       kf12040: '0.00',
       kf12050: '0.01',
       kf12060: '0.01'
     }, {
       dim1: '三代小堆',
       dim3: '60年',
       dim4: '400亿',
       kf12030: '2.46',
       kf12040: '0.02',
       kf12050: '0.01',
       kf12060: '0.01'
     }, {
       dim1: '四代堆（高温堆）',
       dim3: '40年',
       dim4: '100亿',
       kf12030: '3.23',
       kf12040: '0.18',
       kf12050: '0.74',
       kf12060: '0.01'
     }, {
       dim1: '四代堆（快堆）',
       dim3: '30年',
       dim4: '80亿',
       kf12030: '3.23',
       kf12040: '0.18',
       kf12050: '1.17',
       kf12060: '0.01'
     }]
   }
 });


</script>